<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页</title>
    <script src="./date.js"></script>
    <script src="./JQurey.js"></script>
    <style>
        * {
            padding: 0;  
            margin: 0;
        }
        ul {
            list-style: none;
            width: 80%;
            height: 2000px;
            margin: 0 auto;
        }
        ul>li {
            float: left;
            width: 24%;
            margin-top: 10px;
            margin-left: 80px;
            border: 1px solid #666;
            transition: all 0.5s;
            
        }
        img {
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        h2 {
            color: red;
            margin-left: 10px;
        }
        h6 {
            font-weight: initial;
            font-size: 12px;
            margin-left: 10px;
        }
        .small1,.small2 {
            width: 20px;
            height: 20px;
            background-color: orange;
            /* border-radius: 10px; */
            border: none;
        }
        span {
            display: inline-block;
        }
        .box-1 {
            margin-left: 10px;
            margin-bottom: 10px;
        }
        .big {
            margin-left: 40px;
            background-color: #D71619;
            color: white;
            width: 150px;
            height: 30px;
            border: none;
        }
        .active {
            box-shadow: 10px 10px 10px #999;
        }
    </style>
</head>
<body> 
    <ul>
        <!-- <li>
                <div><img src="https://image.toolmall.com/image/toolmallPc/proudct/prouctView/2016/12/39801b28-4d11-41ca-bebd-cd7a993d35b5-medium.jpg"></div>
                <h6>【WKB-W124404N】万克宝_冲击石工钻头6x60x100/[1支]</h6>
                <h2>￥0.8</h2>
                <button class="small">+</button>
                <span>1</span>
                <button class="small">-</button>
                <button class="big">加入购物车</button>
        </li> -->
        <a href="./02-详情页.html"></a>
    </ul>
</body>
</html>

    <script>
        console.log(list);
        $(function(){
            var str = "";
            for (var i = 0; i < list.length; i++) {
                var id = list[i].id;
                console.log(id);
                str += `<li sku=${id}>
                <div>
                    <a href="./02-详情页.html?id=${id}">
                    <img src=https:${list[i].image}>
                    </a>
                    </div>
                <h6>${list[i].name}</h6>
                <h2 money=${list[i].price}>${list[i].price}</h2>
                <div class="box-1">
                <button class="small1">+</button>
                <span>1</span>
                <button class="small2">-</button>
                <button class="big">加入购物车</button>
                </div>
                </li>`;
                $("ul").html(str);
            }
            $('li').on("mouseenter mouseleave", function () {
                $(this).toggleClass("active");
            })
            // 点击图片跳转详情页
            // $('img').click(function(){
            //     window.open("./02-详情页.html");
            // })

            $(".small1").click(function(){
                var num =  $(this).siblings("span").text() - 0;
                num++;
                $(this).siblings("span").text(num);
                // console.log($(this).parent().siblings('h2').text());
                var money =  $(this).parent().siblings('h2').attr('money');
                money = money * num
                $(this).parent().siblings('h2').text(parseFloat(money).toFixed(2));
            })
            $(".small2").click(function(){
                var num =  $(this).siblings("span").text() - 0;
                if(num>0){
                    num--;
                $(this).siblings("span").text(num);

                var money =  $(this).parent().siblings('h2').attr('money');
                money = money * num
                $(this).parent().siblings('h2').text(parseFloat(money).toFixed(2));
                }
            })

            // 跳转到详情页
            // $('img').click(function(){
            //     var id_ = $(this).parent().parent().attr('sku');
            //      // 带上商品id 方便下个页面展示
            //     location.href = './02-详情页.html?id=' + id_;
            // })

        })
        
        




    </script>